<template>
  <div class="bgc">
    <div style="display: flex; justify-content: center; margin-top: 200px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <form>
          <table>
            <tr>
              <td>用户名:</td>
              <td>
                <el-input
                  v-model="user.username"
                  placeholder="请输入用户名"
                ></el-input>
              </td>
            </tr>
            <tr>
              <td>密码:</td>
              <td>
                <el-input
                  type="password"
                  v-model="user.password"
                  placeholder="请输入密码"
                  @keydown.enter.native="doLogin"
                ></el-input>
                <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
              </td>
            </tr>
            <tr>
              <!-- 占两行-->
              <td colspan="2">
                <!-- 点击事件的两种不同的写法v-on:click和 @click-->
                <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
                <el-button
                  style="width: 350px"
                  type="success"
                  round
                  @click="doLogin"
                  >登录</el-button
                >
                <el-link type="warning" style="left: 210px" @click="go"
                  >没有账号？注册一下。</el-link
                >
              </td>
            </tr>
          </table>
        </form>
      </el-card>
    </div>
  </div>
</template>
<script>
import { postLoginGetToken } from "../api/users";

export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    doLogin() {
      // 如果用户名与密码不为空,那么进行后端判断
      if (this.user.username.trim() && this.user.password.trim()) {
        postLoginGetToken(this.user)
          .then(({ data }) => {
            // console.log(data.data);
            if (data.code === 200) {
              if (data.data.data.isAdmina === false) {
                this.$message({
                  message: data.msg,
                  type: "success",
                });
                // 保存信息
                localStorage.setItem("token", data.data.token);
                localStorage.setItem("username", data.data.data.username);
                localStorage.setItem("id", data.data.data.id);
                localStorage.setItem("isAdmin",data.data.data.isAdmina)
                this.$router.push("/index");
              } else {
                this.$message({
                  message: data.msg,
                  type: "success",
                });
                // 保存信息
                localStorage.setItem("token", data.data.token);
                localStorage.setItem("username", data.data.data.username);
                localStorage.setItem("id", data.data.data.id);
                localStorage.setItem("isAdmin",data.data.data.isAdmina)
                this.$router.push("/");
              }
            } else {
              this.$message.error(data.msg);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        let msg = "用户名或密码为空";
        this.$message.error(msg);
      }
    },
    go() {
      this.$router.push("/register");
    },
  },
};
</script>
<style>
.bgc {
  background-image: url("../image/aa.gif");
  background-repeat: no-repeat;
  /* background-position: bottom center; */
  height: 71vh;
}
</style>